<template>
    <div class="login-container">
        <video class="video" muted src="//static.jx3.xoyo.com/video/202301012/fenliuye_kv.mp4" autoplay="true"
            loop="true"></video>


            <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" label-width="100px"
            class="demo-loginForm">
            <!-- 常规登入 -->
            <commonLogin :loginForm="loginForm" @commonLoginForm="handleCommonLoginForm" @submit="submit"></commonLogin>

            <!-- 短信验证码登入 -->
            <!-- <MessageLogin></MessageLogin> -->
            <!-- 微信扫码登入 -->
            <!-- <CodeLogin></CodeLogin> -->

        </el-form>


    </div>
</template>
<script>
import commonLogin from './commonLogin.vue'
import smsLogin from './smsLogin.vue'
import qrLogin from './qrLogin.vue';

var validateCaptcha = (rule, value, callback) => {
	//callback只要传参了,表示表单验证不通过,不传参表示表单验证通过
	//value就是在input中的输入值
	//rule是个对象,就是验证对象
	if (value.length !== 5) {
		callback("验证码必须是5位");
	} else {
		callback();
	}
};
var validateUsername = (rule, value, callback) => {
	//callback只要传参了,表示表单验证不通过,不传参表示表单验证通过
	//value就是在input中的输入值
	//rule是个对象,就是验证对象
	var reg = /^\w{3,16}$/;

	if (reg.test(value)) {
		//验证通过
		callback();
	} else {
		callback("用户名可以是字母数字下划线,3-16位");
	}
};
var validatePassword = (rule, value, callback) => {
	//callback只要传参了,表示表单验证不通过,不传参表示表单验证通过
	//value就是在input中的输入值
	//rule是个对象,就是验证对象
	if (value.length < 3) {
		callback("密码长度不能小于3位");
	} else {
		callback();
	}
};
export default {
    data() {
        return {
            loginForm: {
                username: '',
                password: '',
                captcha: ''
            },
            rules: {
                username: [
                    { validator: validateUsername, trigger: 'blur' }
                ],
                password: [
                    { validator: validatePassword, trigger: 'blur' }
                ],
                captcha: [
                    { validator: validateCaptcha, trigger: 'blur' }
                ]
            }
        }


    },
    components: { commonLogin, smsLogin, qrLogin },
    methods: {
        handleCommonLoginForm(newLoginForm) {
            // console.log(newLoginForm)
            //将传递过来的表单内容 赋值给父组件的loginFrom
            this.loginForm = newLoginForm
        },
        //表单提交

        submit() {
            // console.log('123')
            this.$refs['loginForm'].validate((valid) => {
                if (valid) {
                    //登入
                    // 1.获取后台验证码
                    // 2.进行本地校验
                    // 3.本地校验通过--先校验验证码
                    // 4.验证码通过在校验用户名和密码
                    // 5.成功和失败
                    // 本地校验通过
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }
    }

}
</script>
<style scoped lang="less">
body {
    position: relative;

    .login-container {
        width: 100%;
        height: 100%;

        .video {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;

        }
    }

    .demo-loginForm {
        position: fixed;
        right: 10%;
        top: 16%;
        border-radius: 5px;
        width: 400px;
        background-color: rgba(0, 0, 0, .3);
        padding: 100px 0 50px 0;

        h1 {
            text-align: center !important;
            margin-bottom: 27px;
            color: white;
        }
    }

    .formBox {
        width: 340px;

        .el-button--primary {
            // color: #FFF;
            // background-color: #409EFF;
            // border-color: #409EFF;
            width: 240px;
        }
    }

}

/deep/ .el-form-item__label {
    color: white !important;
}

/deep/ .changeLogin {
    color: white;
    text-align: center;
    font-size: 12px;
}








/deep/ .el-button--primary {
    // color: #FFF;
    // background-color: #409EFF;
    // border-color: #409EFF;
    width: 240px;
}
</style>